/*
  学习目标：useEffect 使用第二个参数
  第二个参数作用：[依赖项1，依赖项2]传入依赖项，依赖项变化了，才会触发回调

  模拟生命周期
  1. 挂载时： 传入依赖项:空数组 - componentDidMount
      原因： 进入页面时，触发一次，后续因为没有依赖项，数据怎么改变，都不会再触发回调
  2. 更新时：传入依赖项:[依赖项] - (componentDidMount + componentDidUpdate)- 类似vue中的watch，带上immediately
      原因： 进入页面时，触发一次，后续依赖项数据改变，触发回调
  3. 卸载时 - 等会说

  不传递第二个参数的区别:
  ✅✅实际开发中：建议传递依赖项
  ❌❌不传第二个参数：浪费性能 - 不需要依赖项，任何的数据改变了，我都触发

*/
import React, { useEffect, useState } from 'react';

export default function App() {
  const [msg, setMsg] = useState('我是初始msg');
  const [msg2, setMsg2] = useState('我是初始msg2');
  const handleChange = (e) => {
    // this.setState({msg:})
    setMsg2(e.target.value);
  };

  // ✨使用副作用函数 useEffect ，把修改后的msg写到title
  // useEffect(() => {
  //   console.log('不传依赖项的回调 -----> ');
  //   document.title = msg;
  // });

  // 传入依赖项 - 空数组 - componentDidMount
  // 进入页面时，进入页面时，触发一次，后续因为没有依赖项，数据怎么改变，都不会再触发回调
  // useEffect(() => {
  //   document.title = msg;
  // }, []);

  // 传入依赖项 - [依赖项] - (componentDidMount + componentDidUpdate) - 类似vue中的watch，带上immediately
  // 进入页面时，触发一次，后续msg数据改变，触发回调
  useEffect(() => {
    document.title = msg;
  }, [msg]);
  return (
    <>
      {/* 定义方法再绑定 */}
      <input type="text" value={msg2} onChange={handleChange} />
      {/* 页面上直接绑定方法 */}
      <input
        type="text"
        value={msg}
        onChange={(e) => {
          setMsg(e.target.value);
        }}
      />
    </>
  );
}
